<template>
    <div class="login-wrapper">
      <!--svg背景-->
      <div class="login-svg-ctn">
        <svg id="svgMove" width="100" height="100" viewBox="1 6.2 169 49">
          <path class="st5" d="M12.7,38.6l9.3,13c0.7,1,2.2,1.1,3.1,0.1l13.2-15.9c0.9-1.1,0.1-2.8-1.3-2.8H4.3c-1.4,0-2.2,1.6-1.4,2.7L22,63
            c0.7,1,2.3,1.1,3.1,0.1l22.7-27.4c0.9-1.1,0.1-2.8-1.3-2.8h0.1h-2.8c-1.4,0-2.2-1.7-1.3-2.8L65.2,2.8c0.8-1,2.4-0.9,3.1,0.1
            l19.1,27.3c0.8,1.1,0,2.7-1.4,2.7H53.3c-1.4,0-2.2-1.7-1.3-2.8l13.2-16c0.9-1,2.4-0.9,3.1,0.1l9.3,13.1" />
          <path class="st1" d stroke-width="0.4" stroke="#e0fff9" fill="none" stroke-linecap="round" />
          <path class="st2" d stroke-width="0.3" stroke="#e0fff9" fill="none" stroke-linecap="round" />
          <path class="st3" d stroke-width="0.2" stroke="#e0fff9" fill="none" stroke-linecap="round" />
          <path class="st0" d stroke-width="0.5" stroke="#e0fff9" fill="none" stroke-linecap="round" />
          <circle id="circle" cx="2.8" cy="34" r="0.36" fill="#72ffe2" />
        </svg>
      </div>
      <div class="login-container">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="left" label-width="0px"
          class="demo-ruleForm login-right-ctn">
          <h3 class="login-title">
            <el-avatar class="login-user-icon"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            <span class="login-text">{{ $t("changepwd.title") }}</span>
          </h3>
          <el-form-item prop="account" class="login-form-item">
            <el-input v-model="ruleForm.account" type="text" auto-complete="off" placeholder="账号"
              prefix-icon="el-icon-user"/>
          </el-form-item>
          <el-form-item prop="oldPwd">
            <el-input v-model="ruleForm.oldPwd" class="hide-eye" type="password" auto-complete="off" placeholder="请输入原密码"
              prefix-icon="el-icon-lock" />
          </el-form-item>
          <el-form-item prop="newPwd">
            <el-input v-model="ruleForm.newPwd" class="hide-eye" type="password" auto-complete="off" placeholder="请输入新密码"
              prefix-icon="el-icon-lock" />
          </el-form-item>
  
          <el-form-item style="width: 100%">
            <el-button type="primary" class="login-submit-btn" @click="handleSubmit">
              {{ $t("changepwd.btn") }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  import API from "../../api"
  import { mapActions } from 'pinia';
  import { useUserInfoStore } from "../../store";
  export default {
    data() {
      return {
        ruleForm: {
          account: this.$route.query.username,
          oldPwd: "",
          newPwd: ""
        },
        rules: {
          account: [{ required: true, message: "请输入账号", trigger: "blur" }],
          oldPwd: [{ required: true, message: "请输入原密码", trigger: "blur" }],
          newPwd: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        }
      };
    },
    methods: {
      ...mapActions(useUserInfoStore, ["setUserName"]),
      handleSubmit(ev) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: this.$t("loading.changepwd"),
              spinner: 'el-icon-loading',
            });
  
            // 需先进行旧密码校验并使新密码生效
            API.send("login", {
              data: {
                username: this.ruleForm.account,
                password: this.ruleForm.newPwd
              }
            }).then((res) => {
              console.log(res)
              this.setUserName(res.data.username)
              loading.close();
              this.$router.push("/dashboard");
            })
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .login-wrapper {
    position: fixed;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  .login-wrapper:before {
    position: absolute;
    content: "";
    background: hsla(0, 0%, 53.7%, 0.3);
    background: -webkit-gradient(linear,
        left top,
        left bottom,
        from(hsla(0, 0%, 53.7%, 0.3)),
        to(hsla(0, 0%, 53.7%, 0.5)));
    background: linear-gradient(hsla(0, 0%, 53.7%, 0.3), hsla(0, 0%, 53.7%, 0.5));
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
  }
  
  .login-container {
    position: fixed;
    top: 50%;
    left: 50%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    -webkit-box-shadow: 0 0 20px rgba(105, 123, 134, 0.2);
    box-shadow: 0 0 20px rgba(105, 123, 134, 0.2);
    height: 428px;
    width: 612px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 14px;
  }
  
  
  .login-right-ctn {
    background-clip: padding-box;
    padding: 44px;
    background: $--color-white;
    height: 100%;
    box-sizing: border-box;
    border-radius: 14px;
  
    .el-form-item__content {
      line-height: 1;
    }
  
    .el-form-item {
      position: relative;
      margin-bottom: 20px;
  
      .el-input__prefix {
        left: 14px;
      }
    }
  
    .el-input__inner {
      height: 44px;
      line-height: 44px;
      border-radius: 8px;
      padding-left: 42px;
      padding-right: 26px;
      color: $--color-text-primary;
    }
  
    .el-input__icon {
      font-size: 16px;
      line-height: 44px;
    }
  
    .login-title {
      margin: 0px auto 25px auto;
      text-align: center;
      color: $--color-text-regular;
      font-size: 26px;
      height: 40px;
    }
  
    .login-user-icon {
      margin-right: 15px;
      width: 40px;
      height: 40px;
    }
  
    .login-text {
      height: 40px;
      line-height: 40px;
      display: inline-block;
      font-size: 26px;
      vertical-align: top;
      font-weight: lighter;
      color: $--color-text-primary;
    }
  
    .login-submit-btn {
      width: 100%;
      border-radius: 22px;
      height: 44px;
      font-size: 16px !important;
    }
  }
  
  //svg背景
  .login-svg-ctn {
    position: relative;
    min-height: 421px;
    height:50%;
    width: 100%;
    overflow: hidden;
  
    svg {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      background: $--color-primary-active;
    }
  
    .st0 {
      fill: none;
      stroke-width: 0.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-miterlimit: 10;
    }
  
    .st5 {
      fill: none;
      stroke: $--color-primary;
      stroke-width: 0.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-miterlimit: 10;
    }
  }
  
  @media screen and (min-width: 1920px) {
    .login-wrapper {
      background-size: 100%;
    }
  }
  
  @media screen and (max-width: 1680px) {
    .login-container {
      height: 364px;
      width: 520px;
  
      .login-right-ctn {
        padding: 55px 38px;
  
        .login-title {
          margin-bottom: 25px;
        }
  
        .login-user-icon {
          width: 34px;
          height: 34px;
        }
  
        .login-text {
          font-size: 22px;
        }
  
        .el-form-item {
          margin-bottom: 16px;
  
          .el-input__inner {
            border-radius: 6px;
            height: 38px;
            line-height: 38px;
            font-size: 12px;
          }
  
          .el-input__icon {
            line-height: 38px;
          }
          .login-submit-btn {
            height: 38px;
            font-size: 13px;
          }
          
        }
      }
    }
  }
  </style>
  